<template>
    <div class="bxConfigHistory">
        <van-nav-bar title="打卡记录" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
            <!-- <el-table-column fixed type="selection"></el-table-column> -->
            <el-table-column prop="attendance_time" label="考勤时间" width="120"></el-table-column>
            <el-table-column prop="name" label="姓名" width="140"></el-table-column>
            <el-table-column prop="attendance_status_text" label="考勤状态"></el-table-column>
        </el-table>
        <van-pagination class="pagination" v-model="page" :page-count="pageCount" @change="pageChange" />
        <!-- <van-button class="pagination" type="warning" @click="delTable" size="large">删除</van-button> -->
    </div>
</template>

<script>
// confirmDialog
export default {
    name: "eduPunchRecord",
    components: {},
    data() {
        return {
            tableData: [],
            page: 1,
            limit: 10,
            pageCount: 1,
            tableSelectValArr: [],
        }
    },
    methods: {
        pageChange() {
            this.getList();
        },
        getList() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                member_goods_id: this.$route.query.id,
                page: this.page,
                limit: this.limit,
            };
            if (this.timeField1 && this.timeField2) {
                let timeVal1 = this.timeVal1
                let timeVal2 = this.timeVal2
                params.over_time_range = `${this.$formatDateTime(this.timeVal1, 'yyyy-MM-dd')}~${this.$formatDateTime(this.timeVal2, 'yyyy-MM-dd')}`
            }
            this.$post("/api/Education/attendance_record", params)
                .then(res => {
                    if (res.code == 1) {
                        this.pageCount = res.data.totalPage // 发票类型
                        this.tableData = res.data.dataList // 发票类型
                        this.$Toast.clear();
                    }
                })
                .catch(err => {
                });
        },
        tableSelectChange(val) {
            this.tableSelectValArr = val;
        },
        delTable() {

            if (this.tableSelectValArr.length == 0) {
                this.$Toast('请选择商品')
                return;
            }
            let Arr = []
            this.tableSelectValArr.map((item, index) => {
                Arr.push(item.id)
            })
            this.$Dialog.confirm({
                title: '温馨提示',
                message: '确认删除这几个产品么',
                closeOnPopstate: true,
            })
                .then(() => {
                    let params = {
                        wx_member_id: localStorage.getItem('wx_member_id'),
                        token: localStorage.getItem('token'),
                        id: Arr,

                    };
                    this.$post("/api/member_goods/del", params)
                        .then(res => {
                            if (res.code == 1) {
                                this.getList();
                                this.$Toast(res.msg);
                            }
                        })
                        .catch(err => {
                        });
                })
                .catch(() => {
                });
        },
    },
    created() {
        this.$Toast.loading({
            duration: 0, // 持续展示 toast
            message: '加载中...',
            forbidClick: true
        });

        this.getList();
    },

}
</script>

<style scoped lang="less">
.bxConfigHistory {
    padding: 11px;
}

.pagination {
    margin-top: 11px;
}

.date-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 11px;

    > div:nth-of-type(1) {
        width: 70px;
    }
}

.line {
    display: flex;
    align-items: center;

    .border-line {
        border: 1px solid #dcdcdc;
        padding: 0 2px;
        margin: 0 3px;
        border-radius: 3px;
    }

    .time-text {
        flex-wrap: nowrap;
        width: 50px;
        font-size: 15px;
        color: #333333;
    }

    > .money-box {
        position: relative;

        > div {
            flex: 1;
            margin: 3px 6px;
            border: 1px solid #dcdcdc;
            color: #333;
            border-radius: 5px;
        }

        > .money-box {
            position: relative;

            span {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }

            input {
                border: none;
                padding-left: 6px;
                height: 25px;
                width: 112px;
                padding-right: 10px;
                font-size: 12px;
                text-align: right;
            }
        }
    }
}

.table-box {
    overflow-x: scroll;
}
</style>